<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <title>主页</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link href="common/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="common/jquery/jquery-3.3.1.js"></script>

    <link href="common/main/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .color-white{
            color: #fff;
        }
        .bg-dark{
            background-color: #000 !important;
        }
        .left-nav {
            position: absolute;
            top: 41px;
            bottom: 42px;
            left: 0;
            z-index: 2;
            padding-top: 10px;
            //background-color: #EEEEEE;
            background-color: #f6f7f7;
            width: 220px;
            max-width: 220px;
            overflow: auto;
            overflow-x: hidden;
            border-right: 1px solid #e5e5e5;
            /* width: 0px; */
        }
        /*.left-nav #nav li {*/
            /*border-bottom: 1px solid #e5e5e5;*/
        /*}*/
        .left-nav #nav a {
            border-bottom: 1px solid #a5a5a5;
        }
        .left-nav #nav li a {
            font-size: 14px;
            padding: 10px 15px 10px 20px;
            display: block;
            cursor: pointer;
            /*border-bottom: 1px solid #a5a5a5;*/
        }
        .left-nav #nav li a i{
            margin-right: 8px;
        }
        .left-nav #nav li .sub-menu li a {
            padding: 12px 15px 12px 30px;
            font-size: 14px;
            cursor: pointer;
        }
        .left-nav #nav li .sub-menu li a i{
            margin-right: 8px;
        }
        /*
        .left-nav #nav li .sub-menu li .sub-menu li a {
            padding-left: 45px;
        }
        */
        .left-nav #nav li a cite {
            font-size: 14px;
        }
        .left-nav #nav li .sub-menu {
            display: none;
        }
        a cite {
            font-style: normal;
        }
        li {
            list-style: none;
        }
        a {
            color: #333;
            text-decoration: none;
        }
        a:hover {
            color: #777;
        }
        .left-nav #nav li .sub-menu li a:hover {
            color: #148cf1;
        }

        .page-content {
            position: absolute;
            top: 41px;
            right: 0;
            bottom: 42px;
            left: 221px;
            overflow: hidden;
            z-index: 1;
        }
        .page-content .tab {
            height: 100%;
            width: 100%;
            background: #EFEEF0 0 0 no-repeat;
            margin: 0px;
        }
        .page-content .tab-title {
             padding-top: 5px;
            height: 42px;
            /*background: #EFEEF0 0px 0px no-repeat;*/
            background-color: #f6f7f7;
            position: relative;
            z-index: 100;
        }
        .tab-title {
            position: relative;
            left: 0;
            height: 40px;
            white-space: nowrap;
            font-size: 0;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-color: #e6e6e6;
            transition: all .2s;
            -webkit-transition: all .2s;
        }
        .tab-title li {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            transition: all .2s;
            -webkit-transition: all .2s;
            position: relative;
            line-height: 40px;
            min-width: 65px;
            padding: 0 15px;
            text-align: center;
            cursor: pointer;
        }
        .tab-title li .tab-close {
            position: relative;
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 20px;
            margin-left: 8px;
            top: 1px;
            text-align: center;
            font-size: 14px;
            color: #c2c2c2;
            transition: all .2s;
            -webkit-transition: all .2s;
        }
        .tab-title li .tab-close:hover {
            border-radius: 2px;
            background-color: #FF5722;
            color: #fff;
        }
        .tab-title li.tab-active{
            background-color: #fff;
            color: #000;
        }

        .page-content .tab-content {
            position: absolute;
            top: 42px;
            bottom: 0px;
            width: 100%;
            background: 0px 0px no-repeat rgb(255, 255, 255);
            padding: 0px;
            overflow: hidden;
        }
        .page-content .tab-content .tab-item iframe {
            width: 100%;
            height: 100%;
        }
        .page-content .tab-content .tab-item {
            width: 100%;
            height: 100%;
            display: none;
        }
        .iframe-show {
            display: block!important;

        }
        .iframe-show iframe{
            border: none;
        }
    </style>
</head>
<body>
    <header>
        <div class="navbar navbar-dark bg-dark box-shadow">
            <h5 class="my-0 mr-md-auto font-weight-normal color-white">Company name</h5>
        </div>
    </header>
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <!--
                <li class="open">
                    <a href="javascript:void(0);">
                        <i class="fa fa-group"></i>
                        <cite>订单管理</cite>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a _href="order-list.html">
                                <i class="fa fa-group"></i>
                                <cite>订单列表</cite>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <i class="fa fa-group"></i>
                        <cite>订单管理</cite>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a _href="order-list.html">
                                <i class="fa fa-group"></i>
                                <cite>订单列表</cite>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">
                        <i class="fa fa-group"></i>
                        <cite>订单管理</cite>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a _href="order-list.html">
                                <i class="fa fa-group"></i>
                                <cite>订单列表</cite>
                            </a>
                        </li>
                    </ul>
                </li>
                -->
            </ul>
        </div>
    </div>
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="tab">
            <ul class="tab-title" id="tab-title">
                <li class="home tab-active">
                    <i class="fa fa-close tab-close"></i>
                    我的桌面
                </li>
            </ul>
            <div class="tab-content" id="tab-content">
                <div class="tab-item iframe-show">
                    <iframe src="menuList.html" scrolling="yes" class="m-iframe"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $(".left-nav #nav").on("click", "li", function(event) {
                if($(this).children(".sub-menu").length){
                    if($(this).hasClass("open")){
                        $(this).removeClass('open');
                        // $(this).find('.nav_right').html('&#xe697;');
                        $(this).children('.sub-menu').stop().slideUp();
                        $(this).siblings().children('.sub-menu').slideUp();
                    }else{
                        $(this).addClass('open');
                        // $(this).children('a').find('.nav_right').html('&#xe6a6;');
                        $(this).children('.sub-menu').stop().slideDown();
                        $(this).siblings().children('.sub-menu').stop().slideUp();
                        // $(this).siblings().find('.nav_right').html('&#xe697;');
                        $(this).siblings().removeClass('open');
                    }
                }else{
                    var url = $(this).children('a').attr('_href');
                    var title = $(this).find('cite').html();
                    var index  = $('.left-nav #nav li').index($(this));

                    for (var i = 0; i <$('.m-iframe').length; i++) {
                        if($('.m-iframe').eq(i).attr('tab-id')==index){
                            tabChange(index);
                            event.stopPropagation();
                            return;
                        }
                    };
                    tabAdd(title, url, index);
                }

                event.stopPropagation();
            });

            $("#tab-title").on("click", "li", function(event){
                var tabId = $(this).attr("tab-id");
                for(var i=0; i<$("#tab-title li").length; i++){
                    $("#tab-title li").eq(i).removeClass("tab-active");
                }
                $(this).addClass("tab-active");
                for(var i=0; i<$(".m-iframe").length; i++){
                    if($(".m-iframe").eq(i).attr("tab-id") == tabId){
                        $(".m-iframe").eq(i).parent().addClass("iframe-show");
                    }else {
                        $(".m-iframe").eq(i).parent().removeClass("iframe-show");
                    }
                }
            });

            //TODO 可以合并 优化
            $("#tab-title").on("click", "li i", function(event){
                var parent = $(this).parent();
                var tabId = parent.attr("tab-id");
                if(parent.hasClass("tab-active")){
                    var prev = parent.prev();
                    var next = parent.next();
                    if(prev.length){
                        prev.addClass("tab-active");
                        var prevTabId = prev.attr("tab-id");
                        parent.remove();
                        for(var i=0; i<$(".m-iframe").length; i++){
                            if($(".m-iframe").eq(i).attr("tab-id") == tabId){
                                $(".m-iframe").eq(i).parent().remove();
                            }
                            if($(".m-iframe").eq(i).attr("tab-id") == prevTabId){
                                $(".m-iframe").eq(i).parent().addClass("iframe-show");
                            }
                        }
                        event.stopPropagation();
                        return ;
                    }else if(next.length){
                        next.addClass("tab-active");
                        var nextTabId = next.attr("tab-id");
                        parent.remove();
                        for(var i=0; i<$(".m-iframe").length; i++){
                            if($(".m-iframe").eq(i).attr("tab-id") == tabId){
                                $(".m-iframe").eq(i).parent().remove();
                            }
                            if($(".m-iframe").eq(i).attr("tab-id") == nextTabId){
                                $(".m-iframe").eq(i).parent().addClass("iframe-show");
                            }
                        }
                        event.stopPropagation();
                        return ;
                    }else {
                        parent.remove();
                        for(var i=0; i<$(".m-iframe").length; i++){
                            if($(".m-iframe").eq(i).attr("tab-id") == tabId){
                                $(".m-iframe").eq(i).parent().remove();
                            }
                        }
                        event.stopPropagation();
                        return ;
                    }
                }else {
                    parent.remove();
                    for(var i=0; i<$(".m-iframe").length; i++){
                        if($(".m-iframe").eq(i).attr("tab-id") == tabId){
                            $(".m-iframe").eq(i).parent().remove();
                        }
                    }
                }
                event.stopPropagation();
            });


            $.ajax({
                url:"/sys/menu/queryAllMenuRel",
                method: "post",
                success: function(data){
                    if(data.messageCode == "001"){
                        var re = digui(data.data, []);
                        var h = shu(re, 0);
                        $("#nav").html(h);
                    }
                }
            });

            function digui(arr,arr1) {
                var arr2 = [];
                if(arr1.length == 0){
                    for(var i=0; i<arr.length; i++){
                        if(arr[i].parentId == 0){
                            arr1.push(arr[i]);
                        }
                    }
                    digui(arr, arr1);
                }else{
                    for(var j=0; j<arr1.length; j++){
                        for(var k=0; k<arr.length; k++){
                            if(arr1[j].id == arr[k].parentId){
                                arr1[j].chil.push(arr[k]);
                                arr2.push(arr[k]);
                            }
                        }
                    }
                    if(arr2.length == 0){
                        return ;
                    }
                    digui(arr, arr2);
                }
                return arr1;
            }

            //var re = digui(arr, []);
            function shu(re, index){
                var html = "";
                var mark = true;
                for(var i=0; i<re.length; i++){
                    if(mark){
                        index++;
                        mark = false;
                    }
                    html += "<li><a href='javascript:void(0)' _href='"+(re[i].href ? re[i].href : '')+"' style='padding-left: "+index * 15 +"px'><i class='"+re[i].icon+"'></i><cite>" + re[i].name+"</cite></a>";
                    if(re[i].chil.length == 0){
                        html += "</li>";
                        continue ;
                    }else{
                        html += "<ul class='sub-menu'>";
                        html += shu(re[i].chil, index);
                        html += "</ul>";
                    }
                    html += "</li>";
                }

                return html;
            }

            //var h = shu(re, 0);
            //$("#nav").html(h);


            function tabAdd(title, url, tabId) {
                $("#tab-title").children("li").removeClass("tab-active");
                $(".tab-item").removeClass("iframe-show");
                var tabTitle = "<li class='tab-active' tab-id='"+tabId+"'><i class='fa fa-close tab-close'></i>"+title+"</li>";
                var tabContent = "<div class='tab-item iframe-show'><iframe tab-id='"+tabId+"' src='"+url+"' scrolling='yes' class='m-iframe'></iframe></div>";
                $("#tab-title").append(tabTitle);
                $("#tab-content").append(tabContent);
            }
            function tabChange(tabId) {
                $("#tab-title").children("li").removeClass("tab-active");
                $(".tab-item").removeClass("iframe-show");
                var tabTitleLen = $("#tab-title").children("li").length;
                var iframeLen = $(".m-iframe").length;
                for(var i=0; i<tabTitleLen; i++){
                    if($("#tab-title").children("li").eq(i).attr("tab-id") == tabId){
                        $("#tab-title").children("li").eq(i).addClass("tab-active");
                    }
                }
                for(var i=0; i<iframeLen; i++){
                    if($(".m-iframe").eq(i).attr("tab-id") == tabId){
                        $(".m-iframe").eq(i).parent().addClass("iframe-show");
                    }
                }
            }
        })
    </script>
</body>
</html>